<template>
  <div id="experienceMaterialConfig">
    <!--上部搜索条件组件-->
    <h1 class="con-right-title">
      体验课详情页配置
    </h1>
    <!-- 表格部分 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="体验课" name="experience"></el-tab-pane>
      <el-tab-pane label="正式课" name="formalClass"></el-tab-pane>
      <component :is="currentView"></component>
    </el-tabs>
  </div>
</template>

<script>
import experience from '@component/appletsManagement/experienceCourseMaterialConfig/component/experience' // 体验课
import formalClass from '@component/appletsManagement/experienceCourseMaterialConfig/component/formalClass' // 正式课
export default {
  name: 'experienceConfig',
  msg: '体验课暖场素材配置',
  components: {
    experience,
    formalClass
  },
  data() {
    return {
      activeName: 'experience',
      currentView: 'experience'
    }
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.currentView = tab.paneName
      /*console.log(tab, event)*/
    }
  }
}
</script>

<style lang="less">
#experienceMaterialConfig {
  .con-right-title {
    padding-bottom: 15px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }
  .el-tabs {
    margin: 0 20px 0 20px !important;
  }
  .el-tabs__item.is-active {
    height: 41px;
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
  }
  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
}
</style>
